<!--
 * @Description: 性能监控
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-10 14:10:09
 * @LastEditTime: 2021-11-12 17:27:22
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div id="customChart"></div>
</template>

<script>
import { Chart } from '@antv/g2';
export default {
  name: 'performance',
  props: ['storage'],
  data () {
    return {
      customChart: null,
      customData: []
    };
  },
  methods: {
    // 创建设备性能历史图表
    async chartInit () {
      let _this = this;
      // 判断是否已存在图表对象
      if (_this.customChart !== null) {
        _this.customChart.destroy();
      }
      // 创建图表
      _this.customChart = new Chart({
        container: 'customChart',
        autoFit: true,
        height: 400
      });
      // X轴显示格式
      _this.customChart.scale('year', {
        type: 'time',
        mask: 'YYYY-MM-DD HH:mm:ss'
      });
      _this.customChart.axis('year', {
        label: {
          formatter: (text, item, index) => {
            text = text.substr(11, text.length);
            return text;
          }
        }
      });
      // Y轴参数设置
      _this.customChart.scale('value', {
        nice: true,
        min: 0,
        max: 150
      });
      // 图表提示框设置
      _this.customChart.tooltip({
        showCrosshairs: true,
        shared: true,
        customItems: (items) => {
          items.map(ind => {
            if (ind.name === 'Temperature') {
              ind.value = ind.value + '℃';
            } else {
              ind.value = ind.value + '%';
            }
          });
          return items;
        },
      });
      // 显示文字色值
      _this.customChart.line().position('year*value').color('country');
      // 图表初始值
      await _this.$http.post({
        url: '/api/sdwan/pm/realtime',
        data: {
          neId: Number(localStorage.getItem('monitor')),
          poId: '002'
        }
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          let arry = [];
          for (let i = 0; i < resultBody.length; i++) {
            // eslint-disable-next-line guard-for-in
            for (let key in resultBody[i].data.values) {
              if (key === '002_001') {
                arry.push({
                  country: 'CPU',
                  year: resultBody[i].time.substr(0, 19),
                  value: resultBody[i].data.values[key]
                });
              }
              if (key === '002_002') {
                arry.push({
                  country: 'Memory',
                  year: resultBody[i].time.substr(0, 19),
                  value: resultBody[i].data.values[key]
                });
              }
              if (key === '002_003') {
                arry.push({
                  country: 'Temperature',
                  year: resultBody[i].time.substr(0, 19),
                  value: resultBody[i].data.values[key] - 15
                });
              }
              arry.push({
                country: 'Storage',
                year: resultBody[i].time.substr(0, 19),
                value: _this.storage
              });
            }
            _this.customData = arry;
            _this.customChart.data(_this.customData);
          }
        }
      });
      _this.customChart.render();
    }
  }
};
</script>